<!DOCTYPE html>
<html>
<head>
    <title>Upload File</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
</head>
<body>
<h1>Upload File Example</h1>
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<div id="container">
    <a id="pickfiles">[Select files]</a>
    <a id="uploadfiles">[Upload files]</a>
</div>
<pre id="console"></pre>
<script type="text/javascript" src="plugin/jquery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="plugin/plupload-2.1.9/plupload.full.min.js"></script>
<script type="text/javascript">

    // 实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button : 'pickfiles', //触发文件选择对话框的按钮，为那个元素id
        container: $('#container')[0],
        runtimes : 'html5,flash,silverlight,html4',
        flash_swf_url : 'plugin/plupload-2.1.9/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
        silverlight_xap_url : 'plugin/plupload-2.1.9/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
    });

    // 当Init事件发生后触发
    uploader.bind('PostInit',function(uploader) {
        $('#uploadfiles').click(function () {
            setParam(uploader, 'oss');
            return false;
        });
    });

    uploader.bind('FileUploaded',function(uploader, files, info) {
        getCallback(info, 'oss');
    });

    uploader.bind('FilesAdded',function(uploader, files) {
        plupload.each(files, function(file) {
            document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
        });
    });

    uploader.bind('UploadProgress',function(uploader, file) {
        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
    });

    uploader.bind('Error',function(uploader, err) {
        document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
    });

    // 在实例对象上调用init()方法进行初始化
    uploader.init();

    function setParam(uploader, type) {
        switch (type) {
            case 'oss':
                $.ajax({
                    url: '/storage/oss/upload/sign',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: 1
                    },
                    success: function (result) {
                        var param = {
                            'key' : result.key + "${filename}",
                            'policy': result.policy,
                            'OSSAccessKeyId': result.id,
                            'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
                            'callback' : result.callback,
                            'signature': result.signature,
                        };
                        uploader.setOption({
                            'url': result.host, //服务器端的上传页面地址
                            'multipart_params': param
                        });
                        uploader.start();
                    }
                });
                break;
            case 'qiniu':
                    //
                break;
        }
    }
    
    function getCallback(info, type) {
        switch (type) {
            case 'oss':
                var msg = '';
                if (info.status == 200) {
                    msg = 'upload to oss success, object name:' + ' 回调服务器返回的内容是:' + info.response;
                }
                else if (info.status == 203) {
                    msg = '上传成功，但是oss访问用户设置的上传回调服务器失败，失败原因是:' + info.response;
                }
                else {
                    msg = info.response;
                }
                document.getElementById('console').appendChild(document.createTextNode("\nError " + ": " + msg));
                break;
            case 'qiniu':
                break;
        }
    }

</script>
</body>
</html>